<template>
    <el-form ref="ruleFormRef" :model="formData" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="id" prop="id">
            <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-input v-model="formData.sex" />
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <!-- <el-input v-model="formData.birthday" /> -->
            <el-date-picker v-model="formData.birthday" type="date" placeholder="出生日期" style="width: 100%" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="院校类型" prop="typein">
            <el-input v-model="formData.typein" />
        </el-form-item>
        <el-form-item label="毕业学校" prop="graschool">
            <el-input v-model="formData.graschool" />
        </el-form-item>
        <el-form-item label="毕业时间" prop="gratime">
            <!-- <el-input v-model="formData.gratime" /> -->
            <el-date-picker v-model="formData.gratime" type="date" placeholder="毕业时间" style="width: 100%" value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="证书编号" prop="certificateno">
            <el-input v-model="formData.certificateno" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { eduInfoApi } from '@/api';

import { ElMessage } from 'element-plus';

import { useRouter } from 'vue-router'
const router = useRouter()

import { useRoute } from 'vue-router'
const route = useRoute()


const ruleFormRef = ref()

const formData = reactive({
    id: 0,
    name: '',
    sex: '',
    birthday: '',
    typein: '',
    graschool: '',
    gratime: '',
    certificateno:'',

})

//数据渲染
onMounted(() => { 
    formData.id = Number(route.query.id)
    callEduInfoOneApi()
})

const callEduInfoOneApi = () => { 
    eduInfoApi.select.call({id: formData.id}).then((res:any) => { 
        console.log(res);
        formData.name=res[0].name
        formData.sex = res[0].sex
        formData.birthday = res[0].birthday
        formData.typein = res[0].typein
        formData.graschool = res[0].graschool
         formData.gratime = res[0].gratime
        formData.certificateno = res[0].certificateno
    })
}

const formSubMit = () => {
    eduInfoApi.update.call({
        id:formData.id,
        name: formData.name,
        sex: formData.sex,
        birthday: formData.birthday,
        typein: formData.typein,
        graschool: formData.graschool,
        gratime: formData.gratime,
        certificateno: formData.certificateno
    }).then((res: any) => {
        // console.log(res);

        ElMessage.success("修改成功")
        //路由跳转
        router.push({ name: 'educations-list' })
    })
}


const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            console.log('submit!')
            //调用后台api接口
            formSubMit()
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.el-form {
    margin-top: 20px;
}
</style>